import React,{Component} from "react";
import business from "./business.module.css";
// import data from "../../data/data.json";

/* 父组件 */ 
class Business extends Component {
  render(){
    return (
      <div className={business.business}>
        <div><Head/></div>
        <div className="business.AnnounceMent"><AnnounceMent/></div>
        <div style={{ background: "red" }}></div>

        <div style={{ marginTop: ".32rem" }}><Real /></div>
        <div style={{ backgroundColor: "red" }}></div>
        <div style={{ marginTop: ".32rem" }}><Information/></div>
      </div>
    );
  }
}
class Head extends Component {
  render(){
    return (
      <div>
        <div className={business.Head}>
          <div className={business.g}>
            <div>
              <div className={business.topic}>粥品香坊(大运村)</div>
              <div className={business.star}>
                <img src={require("../../img/star36_on@2x.png")} alt="" />
                <img src={require("../../img/star36_on@2x.png")} alt="" />
                <img src={require("../../img/star36_on@2x.png")} alt="" />
                <img src={require("../../img/star36_on@2x.png")} alt="" />
                <img src={require("../../img/star36_off@2x.png")} alt="" />
                <span >(661)</span><span className={business.dan}>月销690单</span>
              </div>
            </div>
            <div className={business.j}>
              <span className={business.h}>❤️</span>
              <span className={business.k}>已收藏</span>
            </div>
          </div>
         
          <hr />
          <div className={business.w}>
            <div >
              <span className={business.e}>起送价</span>
              <div><span className={business.c}>20</span><span className={business.b}>元</span> </div>
              
            </div>
            <div className={business.f}></div>
            <div >
              <span className={business.e}>商家配送</span>
              <div><span className={business.c}>4</span><span className={business.b}>元</span> </div>
              
            </div>
            <div className={business.f}></div>
            <div>
              <span className={business.e}>平均配送时间</span>
              <div><span className={business.c}>39</span><span className={business.b}>分钟</span> </div>
              
            </div>
            
          </div>
          
          
        </div>
      </div>
    );
  }
}
/* 公告与活动 */

class AnnounceMent extends Component {
  render(){
    return (
      
        <div  className={business.announcement} >
          <div >
            <h1>公告与活动</h1>
            <div className={business.announcement_titele}>
              粥品香坊其烹饪粥料的秘方源于中国干年古法,在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。
              坚守纯天然、0添加的良心品质深的消费者青睐,发展至今成为粥类引领品牌。是2008年奥运会和2013年园博会
              指定餐饮服务商。
            </div>
          </div>
          <div >

          <hr />
          <div className={business.titele}>
            <img src={require("../../img/decrease_1@3x.png")}alt="" />
            <span>在线支付满28减5,满50减10</span>
          </div>
          
          <hr />
          <div className={business.titele}>
            <img src={require("../../img/decrease_1@3x.png")} alt="" />
            <span>单人精彩赛</span>
          </div>
          
          <hr />
          <div className={business.titele}>
            <img src={require("../../img/decrease_1@3x.png")} alt="" />
            <span>清肺雪梨汤8折抢购</span>
          </div>
          
          <hr />
          <div className={business.titele}>
            <img src={require("../../img/decrease_1@3x.png")} alt="" />
            <span>特价饮品八折抢购</span>
          </div>
          
          <hr />
          <div className={business.titele}>
            <img src={require("../../img/decrease_1@3x.png")} alt="" />
            <span>单人特色套餐</span>
          </div>
          
          <hr />
          <div className={business.titele}>
            <img src={require("../../img/decrease_1@3x.png")} alt="" />
            <span>该商家支持开发票,请在下单时填写好发票抬头</span>
          </div>
          
          <hr />
          <div className={business.titele}>
            <img src={require("../../img/decrease_1@3x.png")} alt="" />
            <span>已加入"外卖保"计划,食品安全保障</span>
          </div>
          <hr />
          </div>
        </div>
      
    );
  }
}
/* 商家实景 */
class Real extends Component{
  render(){
    return <div >
      <hr />
      <h1>商家实景</h1>
      <div className={business.RealStyle}>
        <img src="http://fuss10.elemecdn.com/8/71/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180" alt="" />
        <img src="http://fuss10.elemecdn.com/b/6c/75bd250e5ba69868f3b1178afbda3jpeg.jpeg?imageView2/1/w/180/h/180" alt="" />
        <img src="http://fuss10.elemecdn.com/f/96/3d608c5811bc2d902fc9ab9a5baa7jpeg.jpeg?imageView2/1/w/180/h/180" alt="" />
        <img src="http://fuss10.elemecdn.com/6/ad/779f8620ff49f701cd4c58f6448b6jpeg.jpeg?imageView2/1/w/180/h/180" alt="" />
      </div>
     
      <hr />
    </div>
  }

}
class  Information extends Component{
  render(){
    return <div className={business.announcement}>
      <hr />
      <h1>商家信息</h1>
      <div >
        <hr />
        <div className={business.titele}><span>该商家支持开发票,请在下单时填写好发票抬头</span></div>
        <hr />
        <div className={business.titele}><span>品类:其他菜系、包子粥店</span></div>
        <hr />
        <div className={business.titele}><span>地址:北京市昌平区回龙观西大街龙观置业大厦底商B座102单元1340</span></div>
        <hr />
        <div className={business.titele}><span>营业时间:10:00-20:30</span></div>
      </div>
    </div>
  }
}
export default Business;